<html>
<head>
    <title>Easy-JTest</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="/static/images/favicon.ico" rel="shortcut icon">
    <script type="text/javascript" src="/static/jquery/jquery-3.6.0.min.js"></script>
    <style>
        h1 {
            display: block;
            font-size: 7em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        body {
            text-align: center
        }

        div {
            width: 1000px;
            height: 600px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -300px 0 0 -500px;
        }

        .button {
            width: 140px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-shadow: 1px 1px 1px #333;
            border-radius: 5px;
            margin: 0 20px 20px 0;
            position: relative;
            overflow: hidden;
        }

        .button.gray {
            border: 1px solid #333;
            color: #8c96a0;
            text-shadow: 1px 1px 1px #fff;
            /* border:1px solid #dce1e6; */
            box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
            background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: linear-gradient(top, #f2f3f7, #e4e8ec);
        }

        .gray:active {
            top: 1px;
            box-shadow: 0 1px 3px #a8abae inset, 0 3px 0 #fff;
            background: -webkit-linear-gradient(top, #e4e8ec, #e4e8ec);
            background: -moz-linear-gradient(top, #e4e8ec, #e4e8ec);
            background: linear-gradient(top, #e4e8ec, #e4e8ec);
        }

        .gray:hover {
            border:1px solid #eef2f5;
            background: -webkit-linear-gradient(top, #fefefe, #ebeced);
            background: -moz-linear-gradient(top, #f2f3f7, #ebeced);
            background: linear-gradient(top, #f2f3f7, #ebeced);
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                //var a = $('a')[0];
                var a = $("<a href='http://localhost:8080/test' target='_blank'>百度</a>").get(0);
                var e = document.createEvent('MouseEvents');
                e.initEvent('click', true, true);
                a.dispatchEvent(e);
                console.log('event has been changed');
            });
        });
    </script>
</head>
<body>
<div>
    <h1>500</h1>
    <h2>UH OH! 不要乱来啊</h2>
    <br>
    <button id="btn" type="button" class="button gray">Home</button>
</div>

</body>
</html>